import React from 'react';
import {Text, View, Dimensions, StyleSheet} from 'react-native';
// import LinearGradient from 'react-native-linear-gradient';
import WebView from 'react-native-webview';
import {
  responsiveNumber,
  responsiveNumberByHeight,
} from 'react-native-responsive-number/src/index';
const WIN_WIDTH = Dimensions.get('window').width;
const WIN_HEIGHT = Dimensions.get('window').height;
const styles = StyleSheet.create({
  linearGradient: {
    paddingLeft: responsiveNumberByHeight(30),
    paddingRight: responsiveNumberByHeight(30),
    borderRadius: responsiveNumberByHeight(44),
    height: responsiveNumberByHeight(88),
    width: responsiveNumberByHeight(540),
  },
  buttonText: {
    fontSize: 36,
    textAlign: 'center',
    margin: responsiveNumberByHeight(20),
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});
export default function NewsDetailView(props) {
  console.log('html:');
  let html = `<body style="font-size: 20px;"><img src="${props.image}" style="float: right;width: 228px;height: 158px"/><div>${props.detail}</div></body>`;
  if (!props.image || props.image.length === 0) {
    html = `<body style="font-size: 20px;"><div>${props.detail}</div></body>`;
  }

  return (
    <View
      style={{
        alignItems: 'stretch',
        padding: responsiveNumberByHeight(5),
        backgroundColor: 'white',
        width: Math.max(WIN_WIDTH, WIN_HEIGHT) * 0.7,
        height: Math.min(WIN_WIDTH, WIN_HEIGHT) * 0.8,
        borderRadius: responsiveNumberByHeight(10),
      }}>
      <Text
        style={{
          color: '#444',
          fontSize: responsiveNumber(8),
          fontWeight: 'bold',
          marginTop: responsiveNumberByHeight(20),
          textAlign: 'center',
        }}>
        {props.title}
      </Text>
      <WebView
        style={{
          marginVertical: responsiveNumberByHeight(10),
          flex: 1,
          paddingHorizontal: responsiveNumberByHeight(10),
        }}
        originWhitelist={['*']}
        scalesPageToFit={false}
        source={{html: html}}
      />

      {/*{props.emergency ? null : (*/}
      {/*  <View style={{alignSelf: 'center'}}>*/}
      {/*    <TouchableOpacity onPress={() => ModalViewUtil.dismissBottomView()}>*/}
      {/*      <LinearGradient*/}
      {/*        colors={['#30CF9C', '#1AA6F6']}*/}
      {/*        start={{x: 0, y: 0}}*/}
      {/*        end={{x: 1, y: 0}}*/}
      {/*        style={styles.linearGradient}>*/}
      {/*        <Text style={styles.buttonText}>关闭</Text>*/}
      {/*      </LinearGradient>*/}
      {/*    </TouchableOpacity>*/}
      {/*  </View>*/}
      {/*)}*/}
    </View>
  );
}
